<template>
  <div class="app-container"
    style="width: 50%; margin-left: 20%;  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); margin-top: 2%;padding: 2% 3%;">
    <h1 style="text-align: center;">
      重点行业低（无） VOCs原辅材料替代信息披露内容和要求
    </h1>
    <table style="border-collapse: collapse; width: 100%; border: 2px solid #000; text-align: center;">
      <!-- 企业名称行 -->
      <tr style="height: 45px; line-height: 45px;">
        <td style="width: 25%; border: 1px solid #000; background-color: #f5f5f5; font-weight: bold;">企业名称</td>
        <td style="width: 75%; text-align: left; padding-left: 10px; border: 1px solid #000;" colspan="4">
          {{list.accessoryName}}</td>
      </tr>

      <!-- 所属领域行1 -->
      <tr style="height: 45px; line-height: 45px;">
        <td style="width: 25%; border: 1px solid #000; background-color: #f5f5f5; font-weight: bold;">所属领域</td>
        <td style="width: 75%; border: 1px solid #000;" colspan="4">{{list.accessoryAgency}}</td>
      </tr>

      <!-- 双列所属领域行 -->
      <tr style="height: 45px; line-height: 45px;">
        <td style="width: 25%; border: 1px solid #000; background-color: #f5f5f5; font-weight: bold;">联系人</td>
        <td style="width: 25%; border: 1px solid #000;">{{list.manufacturer}}</td>
        <td style="width: 25%; border: 1px solid #000; background-color: #f5f5f5; font-weight: bold;">联系电话
        </td>
        <td style="width: 25%; border: 1px solid #000;" colspan="2">{{list.manufacturerTel}}</td>
      </tr>

      <!-- 替代项目生产线名称 -->
      <tr style="height: 45px;">
        <td style="width: 25%; border: 1px solid #000; background-color: #f5f5f5; font-weight: bold;">替代项目生产线名称</td>
        <td style="width: 75%; text-align: left; padding-left: 10px; border: 1px solid #000;" colspan="4">
          {{list.accessoryName}}</td>
      </tr>

      <!-- 声明方式 -->
      <tr style="height: 45px; line-height: 45px;">
        <td style="width: 25%; border: 1px solid #000; background-color: #f5f5f5; font-weight: bold;">声明方式</td>
        <td style="width: 75%; text-align: left; padding-left: 10px; border: 1px solid #000;" colspan="4">
          {{list.accessoryName}}</td>
      </tr>


      <tr style="height: 45px;">
        <td style="width: 20%; border: 1px solid #000; background-color: #f5f5f5; font-weight: bold;">原辅材料名称规格</td>
        <td style="width: 20%; border: 1px solid #000; background-color: #f5f5f5; font-weight: bold;">溶剂型/非溶剂型</td>
        <td style="width: 20%; border: 1px solid #000; background-color: #f5f5f5; font-weight: bold;">年使用量(吨)</td>
        <td style="width: 20%; border: 1px solid #000; background-color: #f5f5f5; font-weight: bold;">检测结果VOCs含量(g/L)
        </td>
        <td style="width: 20%; border: 1px solid #000; background-color: #f5f5f5; font-weight: bold;">检测结果VOCs含量(%,质量比)
        </td>
      </tr>
      <tr style="height: 45px;" v-for="(product, index) in list.productList" :key="index">
        <td style="width: 20%; border: 1px solid #000;">{{product.vocName}}</td>
        <td style="width: 20%; border: 1px solid #000;">{{product.vocType}}</td>
        <td style="width: 20%; border: 1px solid #000;">{{product.vocDosage}}</td>
        <td style="width: 20%; border: 1px solid #000;">{{product.vocContent}}</td>
        <td style="width: 20%; border: 1px solid #000;">{{product.vocQuality}}</td>
      </tr>


      <!-- 产品基本情况行 -->
      <tr style="height: 80px; vertical-align: top;">
        <td
          style="width: 25%; border: 1px solid #000; background-color: #f5f5f5; font-weight: bold; padding-top: 10px;">
          替代项目技改内容、
          投资、完成时间，主
          要技术指标、取得环
          境效果</td>
        <td style="width: 75%; border: 1px solid #000; padding: 10px; text-align: left;" colspan="4">
          {{list.accessoryCode}}</td>
      </tr>

      <!-- 技术特点行 -->
      <tr style="height: 80px; vertical-align: top;">
        <td
          style="width: 25%; border: 1px solid #000; background-color: #f5f5f5; font-weight: bold; padding-top: 10px;">
          工艺、技术、装备、产品的优势和经济效益分析及推广前景</td>
        <td style="width: 75%; border: 1px solid #000; padding: 10px; text-align: left;" colspan="4">
          {{list.processSteps}}</td>
      </tr>

      <!-- 企业承诺行 -->
      <tr style="height: 100px; vertical-align: top;">
        <td
          style="width: 25%; border: 1px solid #000; background-color: #f5f5f5; font-weight: bold; padding-top: 10px;">
          企业信息披露承诺</td>
        <td style="width: 75%; border: 1px solid #000; padding: 10px; text-align: left;" colspan="4">
          <p>企业对声明的内容真实性负责。（盖章）</p>
          <p style="margin-top: 15px;text-align: right;word-spacing: 55px; ">年月日
          </p>
        </td>
      </tr>
    </table>

    <p> 1.企业有多条生产线可以用多张表格来声明。企业可内部审查批准自我声明，也可通过第三方认证批准声明，还可引用其他认证的既有结果。</p>
    <p>2.VOCs含量是在施工状态下的检测结果，可引用自第三方机构或供应商提供的检测报告或换算。</p>
    <p>3.声明信息应清晰准确可验证，相关支撑材料可附后或指明共享网站可查询取得。</p>
    <p>4.项目投资应与原辅材料替代环节密切相关。</p>
    <p>5.项目技术优势和经济效益分析应有相关证明材料。</p>
    <p>6.涉及秘密的，请企业自行非密化处理并说明。</p>
    <div style="text-align: center;" v-if="list.review==1">
      <el-button type="success" size="small" @click="handleReview(list.id,2)">审核通过</el-button>
      <el-button type="primary" size="small" @click="handleReview(list.id,3)">审核驳回</el-button>
    </div>
    <div style="text-align: center;" v-if="list.review==2">
      <el-button type="success" size="small" @click="print()">打印</el-button>
    </div>
  </div>
</template>

<script>
  import { getMaterialDetails, getMaterialApproved } from "@/api/custom";

  export default {
    data() {
      return {
        list: null,
        listLoading: true,
        isShowPayPopup: false,
        lid: null,
      };
    },
    components: {},
    created() {

      this.fetchData(this.$route.query.id);
      this.lid = this.$route.query.id;
    },
    methods: {
      fetchData(obj) {
        this.listLoading = true;
        getMaterialDetails(obj).then((response) => {
          this.listLoading = false;
          this.list = response.data;
        });
      },
      handleAudit(id, obj) {
        this.listLoading = true;
        getMaterialApproved(id, obj)
          .then((response) => {
            console.log(response);
            this.listLoading = false;
            this.$message.success(response.message);
            this.fetchData(this.lid);
          })
          .catch((error) => {
            console.log(error);
            this.listLoading = false;
          });
      },
      handleReview(id, obj) {
        this.listLoading = true;
        getMaterialApproved(id, obj)
          .then((response) => {
            console.log(response);
            this.listLoading = false;
            this.$message.success(response.message);
            this.fetchData(this.lid);
          })
          .catch((error) => {
            console.log(error);
            this.listLoading = false;
          });
      },
      print() {

      },
    },
  };
</script>
<style scoped>
  .el-descriptions__header {
    margin-bottom: 0px;
  }
</style>